<template>
  <div id="task_main">

  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {

  methods: {
    async drawTaskData() {
      this.taskDataOption = ''
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      try {
        const {data: res} = await this.$http.get("/AEC/taskData")
        let myChart = echarts.init(document.getElementById('task_main'))
        this.taskDataOption = {
          title: {
            text: 'IT帮任务总量',
            subtext: '数据来自IT帮'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: [new Date().getFullYear() + '年']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: 'category',
            data: ['十二月', '十一月', '十月', '九月', '八月', '七月', '六月', '五月', '四月', '三月', '二月', '一月']
          },
          series: [
            {
              name: new Date().getFullYear() + '年',
              type: 'bar',
              data: [
                res.content[11], res.content[10], res.content[9], res.content[8], res.content[7],
                res.content[6], res.content[5], res.content[4], res.content[3], res.content[2],
                res.content[1], res.content[0]
              ]
            }
          ]
        };

        myChart.setOption(this.taskDataOption);
      } catch (error) {
        error.message
      }
      loading.close()

    }
  }
  , mounted() {
    this.drawTaskData()
  }
}
</script>

<style>
#task_main {
  width: 100%;
  height: 93%;
  margin-top: 2%;


}

</style>